<template>
    <div class="container">
        <!-- 路径导航区域 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>心里评测管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索区域 -->
        <el-row>
            <el-form :inline="true">
                <el-form-item label="心里评测名称">
                    <el-input v-model="queryInfo.name" clearable @clear="queryList" placeholder="请输
入心里评测名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="queryList">搜索</el-button>
                    <el-button type="primary" @click="toAddHeartMark">新增心里评测</el-button>
                    <el-button type="danger" @click="deleteByIds">批量删除</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!-- 表格区域 -->
        <el-table :data="heartMarkList" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="评测名"></el-table-column>
            <el-table-column prop="simplyIntroduce" label="简介"></el-table-column>
            <el-table-column prop="picture" label="评测图片"> 
                <template slot-scope='scope'> <!-- http://localhost:8888/sfzy_ssm/yuLan?filename= -->
					<el-image style="width: 100px; height: 100px"
						:src="'http://localhost:8888/sfzy_ssm/yuLan?filename=' + scope.row.picture"></el-image>
				</template>
            </el-table-column>
            <el-table-column prop="total" label="题目数量"></el-table-column>
          
            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-link type="primary" @click="toEditHeartMark(scope.row)">编辑心里评测</el-link>
                    <el-link type="primary" @click="todeleteCourse(scope.row)">删除心里评测</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <!-- 新增和修改的对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
            <el-form :model="heartMarkData">
                <el-form-item label="心里评测名称" label-width="80px">
                    <el-input placeholder="请输入心里评测名称" v-model="heartMarkData.name"></el-input>
                </el-form-item>
                <el-form-item label="心里评测简介" label-width="80px">
                    <el-input placeholder="请输入心里评测简介" v-model="heartMarkData.simplyIntroduce"></el-input>
                </el-form-item>


                <el-form-item label="心里评测图片" label-width="80px">
                    <!-- <el-input placeholder="请输入文章图片" v-model="article.tabularChart"></el-input> -->
					<!-- 
				    el-upload:上传组件
					action： 上传网址
					list-type：上传组件类型
					on-preview ： 图片预览事件
					on-remove ：移除图片事件
					
				el-dialog : 预览图片组件
				 -->
					<el-upload action="http://localhost:8888/sfzy_ssm/upload" list-type="picture-card"
						:file-list="fileList" :on-success="handleSuccess" :limit="1"
						:on-preview="handlePictureCardPreview" :on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>

                </el-form-item>

                <el-form-item label="题目数量" label-width="80px">
                    <el-input placeholder="请输入题目数量" v-model="heartMarkData.total"></el-input>
                </el-form-item>

               


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="addCourse">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            // 查询信息对象
            queryInfo: {
                name: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 183,
            heartMarkList: [],
            title: '', // 对话框标题
            dialogFormVisible: false, // 是否显示对话框
            heartMarkData: { // 心里评测对象
                "id": '',
                "name": '',
                "simplyIntroduce": '',
                "picture": '',
                "total": ''
            },

            obs: [],//批量删除
			ids: [],//批量删除

            dialogImageUrl: '', // 预览图片路径
			dialogVisible: false, // 预览图片的对话框
			fileList: [],      // 点击修改时，图片的预览效果
        }
    },
    mounted() {
        this.queryList();
    },
    methods: {

        // 处理上传成功的函数
		handleSuccess(response) {
			// console.log(response)
			// 把上传后的图片路径，交给文章对象的tabularChart
			this.heartMarkData.picture = response.message;
		},
		// 删除图片的事件
		handleRemove(file, fileList) {
			console.log(file, fileList);
			// 移除数据
			this.heartMarkData.picture = '';
		},
		// 预览图片事件
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},

        deleteByIds() {
			if(this.obs.length==0){
				this.$message.success("没选数据，删除失败")
				return;
			}
			for (let it of this.obs) {
				this.ids.push(it.id)
			}
			// console.log(this.ids);
			this.$confirm('确认删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 用户点击了确定按钮，执行相应的操作  
				this.$http.delete('heartMark/removeBatch?ids='+this.ids)
					.then((result) => {
						this.$message.success(result.data.message)
						if (this.total % this.queryInfo.pageSize == 1 || this.queryInfo.pageSize == 1) {
							if (this.total != 1) {
								this.queryInfo.pageNum--;
							}
						}
						this.queryList()
					})
			}).catch(() => {
				// 用户点击了取消按钮，执行相应的操作  
				this.$message.error('删除失败')
			});
		},
		//批量删除
		handleSelectionChange(val) {
			this.obs = val;

		},

        //删除文章
		todeleteCourse(row) {
			this.$confirm('确认删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 用户点击了确定按钮，执行相应的操作  
				this.$http.delete('heartMark/remove/' + row.id)
					.then((result) => {
						this.$message.success(result.data.message)
						if (this.total % this.queryInfo.pageSize == 1 || this.queryInfo.pageSize == 1) {
							if (this.total != 1) {
								this.queryInfo.pageNum--;
							}
						}
						this.queryList()
					})
			}).catch(() => {
				// 用户点击了取消按钮，执行相应的操作  
				this.$message.error('删除失败')
			});
		},

        // 添加文章
        addCourse() {
            if (this.heartMarkData.id) { // 有值为true  修改
                this.$http.put("heartMark/edit", this.heartMarkData)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('修改成功！');
                            // 清空数据
                            this.cancle()
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                            this.fileList = []
                      
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })

            } else {
                this.$http.post("heartMark/add", this.heartMarkData)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('添加成功！');
                            // 清空数据
                            this.cancle()
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                            this.fileList = []
                         
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            }
        },
        // 进入修改的预览数据页面
		toEditHeartMark(row) {
			//console.log(row)
			// 赋值
			this.heartMarkData = row;
			// 设置标题
			this.title = "修改文章";
			// 开启对话框
			this.dialogFormVisible = true;
            // 动态的获取图片的名称并放到到fileList
			this.fileList = [{
				name: row.picture,
				url: 'http://localhost:8888/sfzy_ssm/yuLan?filename=' + row.picture
			}];
		
		},
        // 进入添加的对话框
        toAddHeartMark() {
            this.title = "新增心里评测";
            this.dialogFormVisible = true;
            // 把当前登录的用户的id赋值为文章的teacher_id
            // this.article.teacherId = sessionStorage.getItem('userid');
        },
        // 取消对话框
        cancle() {
            this.queryList();
            this.dialogFormVisible = false;
            this.heartMarkData = { // 心里评测对象
                "id": '',
                "name": '',
                "simplyIntroduce": '',
                "picture": '',
                "total": ''
            }

		},

        queryList() {
            // 调用后端接口来获取数据
            this.$http.get('heartMark/find', {
                params: this.queryInfo
            })
                .then(resp => {
                    if (resp.data.status == 200) {
                        // console.log(resp.data)
                        this.heartMarkList = resp.data.data.list;
                        this.total = resp.data.data.total;
                        // console.log(this.articleList)
                    } else {
                        this.$message.error('查询失败！')
                    }
                })
        },

        handleSizeChange(size) {
            //console.log('每页显示数量发生改变');
            this.queryInfo.pageSize = size;
            this.queryInfo.pageNum = 1;
            // 重新查询
            this.queryList()
        },
        handleCurrentChange(num) {
            //console.log('页码发生改变');
            this.queryInfo.pageNum = num;
            // 重新查询
            this.queryList();
        }
    }

}



</script>

<style lang="scss" scoped></style>